<template>

    <ul class="nav-ul">
      <li class="nav-ul-li"
        v-for="item in navItems"
        :key="item.name"
        :class="{'active': activeItem === item.name}"
        @click="handleClick(item.name)"
        @mouseover="hoverItem = item.name"
        @mouseleave="hoverItem = null"
      >
        {{ item.label }}
      </li>
    </ul>

</template>

<script setup>

import { ref , watch, onMounted} from 'vue';
import { useRouter, useRoute  } from 'vue-router';
const navItems = [
  { name: 'Home', label: 'Home' },
  { name: 'Explore', label: 'Explore' },
  { name: 'Booking', label: 'Booking' },
  { name: 'Blog', label: 'Blog' },
];



const activeItem = ref(localStorage.getItem('selectedTags'));
// 获取当前路径
const route = useRoute();

function init() {
  // 检查当前路径是否包含指定字符串
console.log('currentPath',route.name)
if(route.path==("/")){
  activeItem.value = "Home"
}else
if(route.path==('/explore')){
  activeItem.value = "Explore"
}else
if(route.path==('/booking')){
  activeItem.value = "Booking"
}else
if(route.path==('/blog')){
  activeItem.value = "Blog"
}else{
  activeItem.value = ""
}
}
init();
watch(() => route, () => {
  init();
    }, { deep: true });


const hoverItem = ref(null);
const routers =useRouter();
function handleClick(name) {
  activeItem.value = name;
  if(name == "Home"){
    // 保存选中状态到 localStorage
    // localStorage.setItem('selectedTags', "Home");
    routers.push("/")
  }
  if(name == "Explore"){
    // localStorage.setItem('selectedTags', "Explore");
    routers.push({ path: '/explore'});
  }
  if(name == "Booking"){
    // localStorage.setItem('selectedTags', "Booking");
    routers.push({ path: '/booking'});
  }
  if(name == "Blog"){
    // localStorage.setItem('selectedTags', "Blog");
    routers.push({ path: '/blog'});
  }
  // 在这里可以添加路由跳转的逻辑，例如使用 vue-router
}
</script>

<style scoped>
nav {
  /* background-color: #f8f8f8; */
  
}

.nav-ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  height: 50px;
  box-shadow: inset 0 -1px 0 0 #e4e4e4; /* 下内边框效果 */
}

.nav-ul-li {
  /* margin: 0 15px; */
  padding: 10px 0;
  cursor: pointer;
  position: relative;
  font-size: 16px;
  display: flex;
  justify-content: center;
  width: 80px;
  box-shadow: inset 0 -1px 0 0 #e4e4e4;
  margin-right: 15px;
  /* border-bottom: 1px solid #e4e4e4; */
}

.nav-ul-li.active {
  font-weight: bold;
  color: #ff5100;
  border-bottom: 3px solid #ff5100;
}

/* li.active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #ff5100;
  border-radius: 2px;
} */

.nav-ul-li:hover {
  font-weight: bold;
  color: #ff5100;
  border-bottom: 3px solid #ff5100;
  
}

/* li:hover::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #ff5100;
  border-radius: 2px;
} */
</style>
